<template>
  <div class="theme-settings">
    <h3>主题设置</h3>
    
    <div class="theme-options">
      <div class="theme-section">
        <h4>颜色主题</h4>
        <div class="color-themes">
          <button
            v-for="theme in colorThemes"
            :key="theme.name"
            class="theme-button"
            :class="{ active: currentTheme === theme.name }"
            @click="setTheme(theme.name)"
          >
            <div 
              class="theme-preview"
              :style="{ backgroundColor: theme.colors.primary }"
            >
              <div 
                class="theme-accent"
                :style="{ backgroundColor: theme.colors.accent }"
              />
            </div>
            <span>{{ theme.label }}</span>
          </button>
        </div>
      </div>

      <div class="theme-section">
        <h4>背景</h4>
        <div class="background-options">
          <button
            v-for="bg in backgrounds"
            :key="bg.name"
            class="background-button"
            :class="{ active: currentBackground === bg.name }"
            @click="setBackground(bg.name)"
          >
            <div 
              class="background-preview"
              :style="bg.preview"
            />
            <span>{{ bg.label }}</span>
          </button>
        </div>
      </div>

      <div class="theme-section">
        <h4>自定义</h4>
        <div class="custom-options">
          <label>
            <span>字体大小</span>
            <select v-model="fontSize">
              <option value="small">小</option>
              <option value="medium">中</option>
              <option value="large">大</option>
            </select>
          </label>
          
          <label>
            <span>列表宽度</span>
            <input 
              type="range" 
              v-model="listWidth" 
              min="200" 
              max="400"
              step="8"
            >
          </label>

          <label>
            <input 
              type="checkbox" 
              v-model="reducedMotion"
            > 减少动画效果
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useThemeStore } from '../../stores/theme';

const themeStore = useThemeStore();

const colorThemes = [
  { 
    name: 'default', 
    label: '默认蓝',
    colors: { primary: '#0079BF', accent: '#026AA7' }
  },
  { 
    name: 'dark', 
    label: '深色',
    colors: { primary: '#172B4D', accent: '#091E42' }
  },
  { 
    name: 'light', 
    label: '浅色',
    colors: { primary: '#F4F5F7', accent: '#DFE1E6' }
  }
];

const backgrounds = [
  {
    name: 'solid',
    label: '纯色',
    preview: { backgroundColor: '#0079BF' }
  },
  {
    name: 'gradient',
    label: '渐变',
    preview: { 
      background: 'linear-gradient(135deg, #0079BF 0%, #5067C5 100%)'
    }
  },
  {
    name: 'pattern',
    label: '图案',
    preview: {
      backgroundColor: '#0079BF',
      backgroundImage: 'url(/patterns/dots.png)'
    }
  }
];

const currentTheme = ref(themeStore.theme);
const currentBackground = ref(themeStore.background);
const fontSize = ref(themeStore.fontSize);
const listWidth = ref(themeStore.listWidth);
const reducedMotion = ref(themeStore.reducedMotion);

watch([currentTheme, currentBackground, fontSize, listWidth, reducedMotion], 
  ([theme, bg, size, width, motion]) => {
    themeStore.updateTheme({
      theme,
      background: bg,
      fontSize: size,
      listWidth: width,
      reducedMotion: motion
    });
  }
);

const setTheme = (theme) => {
  currentTheme.value = theme;
};

const setBackground = (bg) => {
  currentBackground.value = bg;
};
</script>

<style scoped>
.theme-settings {
  padding: 16px;
}

.theme-section {
  margin-bottom: 24px;
}

.theme-section h4 {
  margin-bottom: 12px;
  color: #5E6C84;
}

.color-themes,
.background-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.theme-button,
.background-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.theme-button.active,
.background-button.active {
  border-color: #0079BF;
}

.theme-preview,
.background-preview {
  width: 80px;
  height: 48px;
  border-radius: 3px;
  margin-bottom: 8px;
  position: relative;
}

.theme-accent {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 3px;
}

.custom-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.custom-options label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

input[type="range"] {
  width: 200px;
}
</style> 